<template>
  <view class="container">
    <!-- 顶部背景 -->
    <!-- <view class="profile-header"> -->
    <!-- 头像 -->
    <!-- <view class="avatar-wrapper" @click="handleAvatarClick">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
        <text class="edit-text">点击更换头像</text>
      </view> -->
    <!-- </view> -->

    <!-- 用户信息 -->
    <view class="user-info">
      <text class="username">{{ userInfo.username }}</text>
      <text class="user-id"
        ><img
          style="vertical-align: middle; width: 25px; height: 25px"
          src="../../static/images/phone.png"
          alt=""
        />
        {{ userInfo.phone_num }}</text
      >
      <!-- <text class="user-id"
        ><img
          style="vertical-align: middle; width: 25px; height: 25px"
          src="../../static/images/user.png"
          alt=""
        />
        {{ userInfo.usercode }}</text> -->
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <uni-row
        class="demo-uni-row"
        :width="nvueWidth"
        v-for="(item, index) in menuList"
        :key="index"
      >
        <uni-col :span="12">
          <view class="demo-uni-col dark">{{ item.label }}</view>
        </uni-col>
        <uni-col :span="12">
          <view class="demo-uni-col light">{{ item.key }}</view>
        </uni-col>
      </uni-row>

      <!-- <uni-list>
        <uni-list-item
          v-for="(item, index) in menuList"
          :key="index"
          :title="item.title"
          :note="item.desc"
          :thumb="item.icon"
          thumb-size="lg"
          clickable
          @click="handleMenuClick(item)"
        >
          <template v-slot:footer>
            <uni-icons type="arrowright" size="18" color="#999" />
          </template>
        </uni-list-item>
      </uni-list> -->
    </view>
  </view>
  <!-- 自定义底部栏 -->
  <CustomTabBar />
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getPerInfo } from '@/services/my'
// 菜单配置
const menuList = reactive([
  {
    label: '有效期',
    value: 'expire_time',
  },
])
onMounted(() => {
  getData()
})
const getData = async () => {
  const res = await getPerInfo()
  userInfo.value = res.data || []
  menuList.map((item) => {
    item.key = res.data[item.value]
  })
  console.log(menuList, '11111')
}

// 用户信息
const userInfo = ref({
  // avatar: '/static/images/logo_icon.png', // 默认头像路径
  username: '未设置昵称',
  phone_num: '123456789',
  usercode: '',
})

// 点击头像
const handleAvatarClick = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      const tempFilePaths = res.tempFilePaths
      userInfo.value.avatar = tempFilePaths[0]
    },
  })
}

// 点击菜单项
const handleMenuClick = (item) => {
  if (item.path) {
    uni.navigateTo({
      url: item.path,
    })
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.profile-header {
  height: 300rpx;
  background: linear-gradient(135deg, #4a90e2, #6c5ce7);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 60rpx;

  .avatar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      border: 4rpx solid #fff;
      background-color: #fff;
    }

    .edit-text {
      color: #fff;
      font-size: 24rpx;
      margin-top: 20rpx;
      opacity: 0.8;
    }
  }
}

.user-info {
  background-color: #fff;
  padding: 40rpx 30rpx;
  text-align: center;

  .username {
    display: block;
    font-size: 36rpx;
    color: #333;
    font-weight: 500;
    margin-bottom: 10rpx;
  }

  .user-id {
    display: block;
    font-size: 24rpx;
    color: #999;
  }
}

.menu-list {
  margin-top: 20rpx;

  ::v-deep .uni-list-item__container {
    padding: 28rpx 30rpx;
  }

  ::v-deep .uni-list-item__content-title {
    font-size: 32rpx;
    color: #333;
  }

  ::v-deep .uni-list-item__content-note {
    font-size: 24rpx;
    color: #999;
  }
}
</style>
